<template>
  <view class="container">
    <hello-title></hello-title>
    <view style="height: 24px"></view>
    <view class="page-title page-title--no-padding">血脂</view>
    <view v-for="record in recordList" :key="record.time">
      <view class="data-card-area" v-if="record.value">
        <view class="page-title page-title--sub page-title--no-padding">{{ record.regDay }}</view>
        <view v-if="getWaringTest(record.value)" class="waring">{{ getWaringTest(record.value) }}</view>
        <view class="data-card data-card--red" v-for="(value,name) in record.value" v-bind:key="value">
          <view class="data-card__head">
            <text>{{ getName(name) }}</text>
            <view class="data-card__icon data-card__icon--blood"></view>
          </view>
          <view class="data-card__content">
            <text>{{ value }}</text>
            <text class="unit">mmol/L</text>
          </view>
        </view>
      </view>
    </view>

    <view class="height-spacer"></view>
    <view class="margin-v--normal fix-bottom">
      <button class="button--block button--purple" @tap="showCreateActionSheet">添加数据</button>
    </view>
    <!--    底部操作栏-->
    <AtModal :isOpened="isCreateActionSheetOpen" :onClose="closeCreateActionSheet" v-if="isCreateActionSheetOpen">
      <AtModalContent>
        <view class='input-row'>
          <view class='input-row__label'>胆固醇</view>
          <view class='input-row__content'><input v-model="danguchunInput" type="digit" placeholder='mmol/L'/></view>
        </view>
        <view class='input-row'>
          <view class='input-row__label'>甘油三酯</view>
          <view class='input-row__content'><input v-model="ganyousanzhiInput" type="digit" placeholder='mmol/L'/></view>
        </view>
        <view class='input-row'>
          <view class='input-row__label'>低蛋白</view>
          <view class='input-row__content'><input v-model="dimiduzhidanbaiInput" type="digit" placeholder='mmol/L'/>
          </view>
        </view>
        <view class='input-row'>
          <view class='input-row__label'>高蛋白</view>
          <view class='input-row__content'><input v-model="gaomiduzhidanbaiInput" type="digit" placeholder='mmol/L'/>
          </view>
        </view>
      </AtModalContent>
      <AtModalAction>
        <button @tap="addRecord" class="custom-button">提交</button>
      </AtModalAction>
    </AtModal>
  </view>
</template>

<script>
import "./index.less";
import helloTitle from "../../../common-components/hello-title/hello-title";
import {getHistoryData} from "../../../services/healthy-data-service";
import {AtInput, AtModal, AtModalHeader, AtModalContent, AtModalAction} from 'taro-ui-vue'
import findIndex from 'lodash.findindex';
import get from 'lodash.get';

const {updateXueZhi} = require("../../../services/healthy-data-service");

/**
 * this.data[0] ={
 dayOfMonth: 11
 dayOfWeek: 6
 regDay: "2021-09-11"
 time: 1631289600000
 value:{danguchun: 10
dimiduzhidanbai: 5
ganyousanzhi: 23
gaomiduzhidanbai: 12}
}
 */
export default {
  name: "index",
  components: {
    helloTitle,
    AtModal, AtModalContent, AtModalAction
  },
  data() {
    return {
      recordList: [],
      isCreateActionSheetOpen: false,
      danguchunInput: "",
      dimiduzhidanbaiInput: "",
      ganyousanzhiInput: "",
      gaomiduzhidanbaiInput: "",
    }
  },
  methods: {
    async addRecord() {
      await updateXueZhi({
        danguchun: this.danguchunInput,
        dimiduzhidanbai: this.dimiduzhidanbaiInput,
        ganyousanzhi: this.ganyousanzhiInput,
        gaomiduzhidanbai: this.gaomiduzhidanbaiInput,
      });
      await this.initData();
    },
    async initData() {
      this.isCreateActionSheetOpen = false;
      const recordList = await getHistoryData("DAY_OF_MONTH", "BLOOD_FAT");
      this.recordList = recordList.reverse();
      console.log("血脂健康记录:", this.recordList);
    },
    showCreateActionSheet() {
      this.isCreateActionSheetOpen = true;
    },
    closeCreateActionSheet() {
      this.isCreateActionSheetOpen = false;
    },
    handleTypeChange(e) {
      this.renalInputType = this.selectebleList[parseInt(e.detail.value)];
    },
    handleValueChange(e) {
      console.log(e)
    },
    getName(key) {
      switch (key) {
        case "danguchun":
          return "胆固醇";
          break;
        case "ganyousanzhi":
          return "甘油三酯";
          break;
        case "dimiduzhidanbai":
          return "低密度脂蛋白";
          break;
        case "gaomiduzhidanbai":
          return "高密度脂蛋白";
          break;
        default:
          return "--";
          break;
      }
    },
    getUnit(key) {
      switch (key) {
        case "danguchun":
          return "胆固醇";
          break;
        case "ganyousanzhi":
          return "甘油三酯";
          break;
        case "dimiduzhidanbai":
          return "低密度脂蛋白";
          break;
        case "gaomiduzhidanbai":
          return "高密度脂蛋白";
          break;
        default:
          return "--";
          break;
      }
    },
    getWaringTest(value) {
      if (value['danguchun'] < 2.8 || value['ganyousanzhi'] < 0.56) {
        return '您的血脂偏低，请注意营养补充'
      }

      if (value['danguchun'] > 5.17 || value['ganyousanzhi'] > 1.7 || value['dimiduzhidanbai'] > 3.1) {
        return '您的血脂偏高，请控制油脂类食物的摄入'
      }
      return ''
    }
  },
  async created() {
    await this.initData();
  }
}
</script>
